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Grid 


Text & Images 


Basic grid - full width is 12 columns wide 

<!— change .container to .container-fluid 
to be full width —> 

<div class="container"> 

<!— Columns are always 50% wide, on 
mobile and desktop —> 

<div class="row"> 

<div class="col-xs-6">.col-xs-6</div> 
<div class="col-xs-6">. col-xs-6</div> 
</div> 

<!-- nested columns example --> 

<div class="row"> 

<div class="col-xs-6">. col-xs-6</div> 
<div class="col-xs-6">.col-xs-6 
<div class="row"> 

<div class="col-md-6">100% mobile 50% 
everywhere else</div> 

<div class="col-md-6">100% mobile 50% 
everywhere else</div> 

</div> 

</div> 

</div> 

</div> 

Media queries 

/* Extra small devices (phones, less than 
768px) No media query since this is the 
default in Bootstrap */ 

/* small (tablets, 768px and up) */ 

@media (min-width: @screen-sm-min) { ... } 

/* medium (desktops, 992px and up) */ 

@media (min-width: @screen-md-min) { ... } 

/* large (large desktops, 1200px and up) */ 

@media (min-width: @screen-lg-min) { ... } 


.text-left Left aligned text 
.text-center Center aligned text 
.text-right Right aligned text 
.text-justify Justified text 
.text-nowrap No wrap text 
.text-lowercause Lowercase text 
.text-uppercase Uppercase text 
.text-capitalize Capitalized text 
.lead Good for first paragraph of article 

.list-unstyled Removes default list margin/ 
padding 

.list-inline Makes list items inline 
.dl-horizontal Makes list items two columns 
.img-responsive Make an image responsive 
.img-rounded Adds rounded corners to image 
.img-circle Crops image to be circle 

.img-thumbnail Adds rounded corner and 
border to an image 

.pull-left Floats item left 
.pull-right Floats item right 

.center-block Set an elemennt to block with 
auto left and right margin 

.clearfix Clear floats by adding this class 
to the parent container 

Blockquote 

<blockquotexp>Lorem ipsum dolor</p> 

<footer>Someone famous in <cite 
title="Source Title >Source Title</cite></ 
footerx/blockquote> 

Headings 

<hl>hl. Bootstrap heading <small>Secondary 
text</smallx/hl> 

<p class="hl' >Paragraph that looks like 
heading</p> 
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Navbar 


<!— Fixed top navbar with brand as logo image tags —> 

<nav class="navbar navbar-default navbar-fixed-top"> 

<div class="container-fluid"> 

<!— Brand and toggle get grouped for better mobile display —> 

<div class="navbar-header"> 

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data- 
target="#bs-example-navbar-collapse-l" aria-expanded="false"> 

<span class="sr-only">Toggle navigation</span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

<span class="icon-bar"x/span> 

</button> 

<a class="navbar-brand" href="#"ximg alt="Brand" src="..."></a> 

</div> 

<!-- Collect the nav links, forms, and other content for toggling --> 

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-l"> 

<ul class="nav navbar-nav"> 

<li class="active"xa href="#">Linl< <span class="sr-only">(current)</spanx/ax/ 
li> 

<lixa href="#">Link</ax/li> 

<li class="dropdown"> 

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria- 
haspopup="true" aria-expanded="false">Dropdown <span class="caret"x/spanx/a> 

<ul class="dropdown-menu"> 

<lixa href="#">Action</ax/li> 

<li role="separator" class="divider"x/li> 

<lixa href="#">Separated link</ax/li> 

</ul> 

</li> 

</ul> 

</div><! — /.navbar-collapse —> 

</divx!-- /.container-fluid --> 

</nav> 
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Forms 


<form> 

<div class="form-group"> 

<label for="exampleInputEmaill">Email address</label> 

<input type="email" class="form-control" id="exampleInputEmaill" placeholder="Email"> 
</div> 

<div class="form-group"> 

<label for="exampleInputPasswordl">Password</label> 

<input type="password" class="form-control" id="exampleInputPasswordl" 
placeholder="Password"> 

</div> 

<div class="form-group"> 

<label for="exampleInputFile">File input</label> 

<input type="file" id="exampleInputFile"> 

<p class="help-block">Example block-level help text here.</p> 

</div> 

<div class="checkbox"> 

<label> 

<input type="checkbox"> Check me out 
</label> 

</div> 

<button type="submit" class="btn btn-default">Submit</button> 

</form> 

Buttons 


.btn Needs to be added to all buttons because it adds padding and margin 
.btn-default The default button style 

.btn-primary The button that has the primary action in a group 
.btn-success Could be used on the last submit button in a form 
.btn-info Informational button 

.btn-link Removes background color and add text color 
.btn-lg Large buttom 
.btn-sm Smaller than default button 
.btn-xs Even smaller 

.btn-block Button that spans full width of parent 


<a class="btn btn-default" 
href="#" role="button">Link</a> 

<button class="btn btn-primary" 
type="submit' >Button</button> 
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<div id="carousel-example-generic" class=" carousel slide" data-ride="carousel"> 

<!— Indicators —> 

<ol class="carousel -indicators'^ 

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"x/li> 
<li data-target="#carousel-example-generic" data-slide-to="l"x/li> 

</ol> 

<!-- Wrapper for slides --> 

<div class="carousel-inner" role="listbox"> 

<div class="item active"> 


<img src=". .." alt="..."> 

<div class="carousel-caption"> 


</div> 

</div> 

<div class="item"> 



<div class="carousel-caption"> 

</div> 

</div> 

</div> 

<!-- Controls --> 

<a class="left carousel-control" href="#carousel-example-generic" role="button" data- 
slide="prev"> 

<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"x/span> 

<span class="sr-only">Previous</span> 


</a> 


<a class="right carousel-control" href="#carousel-example-generic" role="button" data- 
slide="next"> 

<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"x/span> 

<span class="sr-only">Next</span> 


</a> 

</div> 
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Jumbotron 

<div class=" jumbotron"> 

<hl>Hello, world!</hl> 

<p>...</p> 

<pxa class="btn btn-primary btn-lg" href="#" role="button">Learn more</ax/p> 
</div> 

To make the jumbotron full width, and without rounded corners, place it outside all 
.containers and instead add a .container within. 

<div class=" jumbotron"> 

<div class="container"> 

</div> 

</div> 

Page header 

<div class="page-header"> 

<hl>Example page header <small>Subtext for header</smallx/hl> 

</div> 

Breadcrumbs 


<ol class="breadcrumb"> 

<lixa href="#">Home</ax/li> 
<lixa href="#">Library</ax/li> 
<li class="active">Data</li> 
</ol> 

Responsive embed 


<!— 16:9 aspect ratio - change aspect ratio by replacing 16by9 with 4by3 —> 
<div class="embed-responsive embed-responsive-16by9"> 

<iframe class="embed-responsive-item" src=" ... "x/iframe> 

</div> 
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Tables 


<!— Responsive table with all of the options applied —> 

<div class="table-responsive"> 

<table class="table table-condensed table-hover table-bordered table-striped"> 
<tr class="active">. ..</tr> 

<tr> 

<td class="info">. ..</td> 

</tr> 

</table> 

</div> 

Alphabetical Index of CSS Classes 


active 

.btn-danger 

.center-block 

affix 

.btn-default 

.checkbox 

alert 

.btn-group 

.checkbox-inline 

alert-danger 

.btn-group-justified 

.close 

alert-dismissible 

.btn-group-vertical 

.col-lg-* /*(1-12)*/ 

alert-info 

.btn-info 

.col-lg-offset-* /*(0-12)*/ 

alert-link 

.btn-link 

.col-lg-pull-* /*(0-12)*/ 

alert-success 

. btn-primary 

.col-lg-push-* /*(0-12)*/ 

alert-warning 

.btn-sm 

.col-md-* /*(1-12)*/ 

arrow 

.btn-success 

.col-md-offset-* /*(0-12)*/ 

badge 

.btn-toolbar 

.col-md-pull-* /*(0-12)*/ 

bg-danger 

.btn-warning 

.col-md-push-* /*(0-12)*/ 

bg-info 

.btn-xs 

.col-sm-* /*(1-12)*/ 

bg-primary 

.caption 

.col-sm-offset-* /*(0-12)*/ 

bg-success 

.caret 

.col-sm-pull-* /*(0-12)*/ 

bg-warning 

.carousel 

.col-sm-push-* /*(0-12)*/ 

bottom 

. carousel-caption 

.col-xs-* /*(1-12)*/ 

breadcrumb 

.carousel-control 

.col-xs-offset-* /*(0-12)*/ 

btn 

.carousel-indicators 

.col-xs-pull-* /*(0-12)*/ 

btn-block 

.carousel-inner 

.col-xs-push-* /*(0-12)*/ 
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collapse 

.hidden-lg 

.list-group-item-danger 

collapsing 

.hidden-md 

.list-group-item-heading 

container 

.hidden-print 

.list-group-item-info 

container-fluid 

.hidden-sm 

.list-group-item-success 

control-label 

.hidden-xs 

.list-group-item-text 

divider 

.hide 

.list-group-item-warning 

dropdown 

.icon-bar 

.list-inline 

dropdown-backdrop 

.icon-next 

.list-unstyled 

dropdown-header 

.icon-prev 

.mark 

dropdown-menu 

.img-circle 

.media 

dropdown-menu-left 

.img-rounded 

.media-body 

dropdown-menu-right 

.img-thumbnail 

.media-heading 

dropdown-toggle 

. in 

.media-list 

embed-responsive 

.initialism 

.media-object 

embed-responsive-16by9 

.input-group 

.modal 

embed-responsive-4byB 

. input-group-addon 

.modal-backdrop 

fade 

. input-group-btn 

.modal-body 

form-control 

. input-lg 

.modal-content 

form-control-feedback 

.input-sm 

.modal-dialog 

form-control-static 

.invisible 

.modal-footer 

form-group 

. item 

.modal-header 

glyphicon 

. jumbotron 

.modal-lg 

glyphicon-chevron-left 

.label 

.modal-open 

glyphicon-chevron-right 

.label-danger 

.modal-scrollbar-measure 

hi 

.label-default 

.modal-sm 

h2 

.label-info 

.modal-title 

hB 

.label-primary 

. nav 

h4 

.label-success 

. nav-divider 

h5 

.label-warning 

.nav-justified 

h6 

.lead 

.nav-tabs 

has-feedback 

.left 

.nav-tabs-justified 

help-block 

.list-group 

.navbar 

hidden 

.list-group-item 

.navbar-brand 
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. navbar-btn 

.popover-title 

.text-success 

. navbar-collapse 

.pre-scrollable 

.text-uppercase 

.navbar-default 

.prev 

.text-warning 

.navbar-fixed-bottom 

.progress 

.thumbnail 

.navbar-fixed-top 

.progress-bar 

.tooltip 

.navbar-form 

.progress-bar-danger 

.tooltip-arrow 

.navbar-header 

.progress-bar-info 

.tooltip-inner 

.navbar-inverse 

.progress-bar-striped 

.top 

.navbar-left 

.progress-bar-success 

.visible-lg 

.navbar-link 

.progress-bar-warning 

.visible-lg-block 

.navbar-nav 

.pull-left 

.visible-lg-inline 

.navbar-right 

.pull-right 

.visible-lg-inline-block 

.navbar-static-top 

.right 

.visible-md 

.navbar-text 

. row 

.visible-md-block 

.navbar-toggle 

. show 

.visible-md-inline 

.next 

.small 

.visible-md-inline-block 

.page-header 

.sr-only 

.visible-print 

.pager 

.tab-pane 

.visible-print-block 

.pagination 

.table 

.visible-print-inline 

.panel 

.table-bordered 

.visible-print-inline-block 

.panel-body 

.table-responsive 

.visible-sm 

.panel-danger 

.text-capitalize 

.visible-sm-block 

.panel-default 

.text-center 

.visible-sm-inline 

.panel-footer 

.text-danger 

.visible-sm-inline-block 

.panel-group 

.text-hide 

.visible-xs 

.panel-heading 

.text-info 

.visible-xs-block 

.panel-info 

.text-justify 

.visible-xs-inline 

.panel-primary 

.text-left 

.visible-xs-inline-block 

.panel-success 

.text-lowercase 

.well 

.panel-title 

.text-muted 

.well-lg 

.panel-warning 

.text-nowrap 

.well-sm 

.popover 

.text-primary 


.popover-content 

.text-right 
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Quickly Learn Bootstrap 4 

A learn by doing approach. 



Build a CMS dashboard 
and homepage. 

The goal of this ebook is to introduce you 
to the most used components and how 
to reference the official documentation. 

You will build two page layouts so you can 
quickly visualize how you start a new project 
from scratch. Follow along step by step as 
you copy and paste the necessary code to 
build a homepage and CMS backend admin 
area. You will become familiar with common 
components, grid structure, grid nesting, and 
navbar. 



Download Sample Chapter 


Build two real world examples. Follow 
along step-by-step to build a web 
application dashboard and homepage for a 
services business. 

Always up to date. Receive free book 
updates for each minor version release and 
a discount for major versions. 

Windows 10 PC screenshots and 
instructions. Have confidence knowing the 
tools and instructions will work on your 
machine. 
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